<template>
  <div class="default-container login_bg" >
    <div class="login-view-info" v-loading="loading">
      <div class="login-title">金普威快速开发平台</div>
      <div class="login-cell">
        <i class="el-icon-user"></i>
        <el-input v-model="username" placeholder="请输入账号"></el-input>
      </div>
      <div class="login-cell">
        <i class="el-icon-lock"></i>
        <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
      </div>
      <div  class="login-config">
        <div class="config-text">账号注册</div>
        <div class="config-text" style="text-align: right;">忘记密码</div>
      </div>
      <el-button class="login-btn" type="primary" @click="goLogin">登录</el-button>
    </div>
  </div>
</template>

<script>

import { doLogin} from '@/api/loginApi.js'
import { getCurrentUserInfo} from '@/api/systemApi.js'
import { getMenuTreeListByRoleId } from '@/api/menuApi.js'
import { setPermission } from '@/common/utils/permission.js'

export default {
  data(){
    return{
      username:'admin',
      password:'111111',
      loading:false
    }
  },
  components:{

  },
  created(){
    this.$storage.removeItem('permissionsList')
    this.$storage.removeItem('userInfo')
  },
  methods:{
    async goLogin(){
      if(this.username == ''){
        this.$message.error('请输入账号')
        return
      }
      if(this.password == ''){
        this.$message.error('请输入密码')
        return
      }
      this.loading = true
      let formData = new FormData()
      formData.append("username",this.username)
      formData.append("password",this.password)
      doLogin(formData).then((res) => {
        if(res.data.code == 200 && res.data.success){     //登录成功后保存token数据 跳转至首页
          this.$storage.setItem('token',res.data.data)
          this.getUserInfo()
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.loading = false
        this.$message.error('账号密码错误')
      })
    },
    getUserInfo(){
      getCurrentUserInfo().then((res=>{
        if(res.data.code == 200 && res.data.success){
          this.$storage.setItem('userInfo',res.data.data)
          let roleIds = res.data.data.roleId.split(",")
          this.getMenuTreeList(roleIds)
        }else{
          this.loading = false
          this.$message.error(res.data.message)
        }
      })).catch((e)=>{
        this.loading = false
        this.$message.error(e.message)
      })
    },
    getMenuTreeList(roleIds){          //获取角色菜单列表
      var list = []
      roleIds.forEach(element => {
        list.push(getMenuTreeListByRoleId({roleId:element}))
      });
      Promise.all(list).then((result)=>{
        let list = result.filter((res)=>{
          return res != undefined
        })
        if(list.length > 0){
          let permissionsList = setPermission(list)
          this.$storage.setItem('permissionsList',permissionsList)
          this.loading = false
          setTimeout(() => {
            this.$router.push({
              path: "/home/center"
            })
          }, 200);
        }else{
          this.loading = false
          this.$message.error('获取权限失败，请联系管理人员')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login_bg{
  min-width: 1000px;
  min-height: 700px;
  background: url('http://www.kinpoway.com/img/slider02.jpg') no-repeat;
  background-size: 100% 100%;
}

.login-view-info{
  width: 400px;
  height: 400px;
  background: rgba($color: #ffffff, $alpha: 0.9);
  border-radius: 10px;
  position: absolute;
  right: 100px;
  top: 200px;
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  box-sizing: border-box;
  .login-title{
    width: 100%;
    line-height: 44px;
    font-size: 26px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .login-cell{
    height: 50px;
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    i{
      font-size: 24px;
    }
    .el-input__inner{
      background-color: transparent in !important;
      border: none in !important;
    }
  }

  .login-config{
    width: 100%;
    height: 30px;
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    color: #999;
    div{
      flex: 1;
      cursor: pointer;
    }
    .config-text:hover{
      font-size: 15px;
      color: #409EFF;
    }
  }
  .login-btn{
    width: 100%;
    height: 40px;
    margin-top: 30px;
  }
}

</style>
